<!-- 供应商费用即将结算 -->
<template>
  <a-modal
    :visible="visible"
    @cancel="onClose"
    :title="pageTlt"
    :mask-closable="false"
    :align-center="false"
    class="modal-dialog-wrapper"
    top="30px"
    width="85vw"
    okText="确认"
  >
    <div class="relative">
      <list-searcher :searchList="searchList" v-model:searchForm="queryParam" @loadData="loadData" />
      <table-index :table="table" :rowKey="`id`" @loadData="loadData">
        <template #depositDtos="{ record }">
          <div class="mb-1 flex" v-for="item in record.depositDtos" :key="item.id">
            <div class="flex justify-end" style="width: 80px">
              <a-tag :style="getTagColor(item.depositStatus)" class="mr-2 font-bold">
                {{ item.depositStatusName }}
              </a-tag>
            </div>
            <span>{{ item.depositTypeName }}：{{ item.changeAmount || 0 }}</span>
          </div>
        </template>
        <template #time="{ record }">
          {{ record.startTime }}
          <div>-</div>
          {{ record.endTime }}
        </template>
        <template #planThawTime="{ record }">
          <div v-if="record.planThawTime">
            {{ dayjs(record.planThawTime).format('YYYY-MM-DD') }}
          </div>
          <div v-else>-</div>
        </template>
      </table-index>
    </div>
    <template #footer>
      <a-button @click="onClose">关闭</a-button>
    </template>
  </a-modal>
</template>

<script setup name="wyzcyjtips">
  import { ref, reactive, computed } from 'vue'
  import { memberWarnList } from '@/api/workplace.js'
  import { useTable, useFetchTableDataApi } from '@/hooks/table'
  import { usePageDict } from '@/hooks/useDict'
  import dayjs from 'dayjs'
  const dict = usePageDict('shortOrderDict')
  //查询条件
  let queryParam = reactive({
    planThawDate: [],
  })
  const searchList = computed(() => {
    return [
      { label: '承租人姓名', prop: 'memberNameLike', type: 'a-input' },
      { label: '承租人电话', prop: 'memberPhoneLike', type: 'a-input' },
      { label: '订单号', prop: 'orderCodeLike', type: 'a-input' },
      { label: '租车押金状态', prop: 'carDepositStatus', type: 'a-select', options: dict.depositStatusEnum },
      {
        label: '押金预计解冻日期',
        prop: 'planThawDate',
        type: 'i-range-picker',
        change: (value = []) => {
          queryParam.planThawDateStart = value[0]
          queryParam.planThawDateEnd = value[1]
        },
      },
    ]
  })
  // 待处理 - table 配置
  const table = useTable({
    tableHeight: 'calc(100vh - 400px)',
    columns: [
      { title: '承租人姓名', dataIndex: 'memberName', width: 130 },
      { title: '承租人电话', dataIndex: 'memberPhone', width: 120 },
      { title: '订单号', dataIndex: 'orderCode', width: 170 },
      { title: '订单状态', dataIndex: 'orderStatusName', width: 100 },
      { title: '车牌号', dataIndex: 'carLicenseNo', width: 110 },
      { title: '租赁周期', slotName: 'time', width: 180 },
      { title: '押金(元)', slotName: 'depositDtos', width: 250 },
      { title: '押金预计解冻日期', slotName: 'planThawTime', width: 180 },
    ],
  })
  // 列表接口调用
  const loadData = useFetchTableDataApi(table, queryParam, memberWarnList)
  // modal展示
  const visible = ref(false)
  let pageTlt = ref('')
  const open = (label) => {
    pageTlt = label
    visible.value = true
    loadData(1)
  }
  const onClose = () => {
    visible.value = false
    queryParam.memberNameLike = ''
    queryParam.memberPhoneLike = ''
    queryParam.orderCodeLike = ''
    queryParam.carDepositStatus = ''
    queryParam.planThawDate = []
    queryParam.planThawDateStart = ''
    queryParam.planThawDateEnd = ''
  }
  const getTagColor = (status) => {
    switch (status) {
      // 应收未收
      case 10:
        return { backgroundColor: '#FFF7E8', color: '#FF7D00' }
      // 应收已收
      case 30:
        return { backgroundColor: '#E8FFEA', color: '#00B42A' }
      // 应退未退
      case 50:
        return { backgroundColor: '#FFECE8', color: '#F53F3F' }
      // 应退已退
      case 70:
        return { backgroundColor: '#E8F7FF', color: '#3491FA' }
      // 已作废
      case 90:
        return { backgroundColor: '#F2F3F5', color: '#1D2129' }
      default:
        return { backgroundColor: '#F2F3F5', color: '#1D2129' }
    }
  }
  defineExpose({
    open,
  })
</script>
